<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>资产详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/ydui/ydui.rem.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <!-- 引入rem自适应类库 -->
    <script src="static/ydui/ydui.flexible.js"></script>
</head>
<body>
<div id="app" v-cloak style="height:100%;background-color: #fff;">
    <yd-layout>
    	
    	<yd-navbar slot="navbar" title="资产详情">
            <a href="index.html" slot="left">
                <yd-navbar-back-icon>返回</yd-navbar-back-icon>
            </a>
        </yd-navbar>

        <div class="yd-cell-box">
            <div class="yd-cell ox-fund-detail">
                <div class="yd-cell-item" style="padding-bottom: 0.24rem;">
                    <div class="yd-cell-left" style="width: 67%;">
                        <span style="width: 50%;">
                            <div style="font-size: 0.34rem;font-weight: 600;line-height: 1rem;">
                                <!--i class="fa fa-bitcoin" style="font-size: 0.34rem;"></i-->
                                <img v-if="token=='OXT'" :src="mediaUrl+logoMini" style="width: 0.38rem;">
                                <img v-if="token!='OXT'" :src="mediaUrl+logo" style="width: 0.38rem;">
                                <span style="margin-left: 0.2rem;">{{token}}</span>
                            </div>
                            <div style="font-size: 0.2rem;line-height: 0.4rem;color: #bfbfbf;">可用({{token}})</div>
                            <div style="font-size: 0.3rem;line-height: 0.4rem;font-weight: 600;">{{balance}}</div>
                        </span>
                        <span style="width: 50%;">
                            <div style="font-size: 0.4rem;font-weight: 600;line-height: 1rem;">&nbsp;</div>
                            <div style="font-size: 0.2rem;line-height: 0.4rem;color: #bfbfbf;">锁仓({{token}})</div>
                            <div style="font-size: 0.3rem;line-height: 0.4rem;font-weight: 600;">{{lock}}</div>
                        </span>
                    </div>
                    <div class="yd-cell-right">
                        <span>
                            <div style="font-size: 0.4rem;font-weight: 600;line-height: 1rem;">&nbsp;</div>
                            <!--div style="font-size: 0.2rem;line-height: 0.4rem;color: #bfbfbf;">总资产折合(CNY)</div>
                            <div style="font-size: 0.3rem;line-height: 0.4rem;font-weight: 600;">≈{{cny}}</div-->
                            <div style="font-size: 0.2rem;line-height: 0.4rem;color: #bfbfbf;">单价/涨跌幅</div>
                            <div style="font-size: 0.3rem;line-height: 0.4rem;font-weight: 600;">{{rate}}/{{ox_ups_and_downs}}%</div>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="ox-fund-oper-container">
            <div class="ox-fund-oper-container-box">
                <div class="yd-grids-4 ox-fund-detail-operbox">
                    <a @click="recharge" class="yd-grids-item ox-grids-box">
                        <div class="yd-grids-icon">
                            <i aria-hidden="true" class="fa fa-credit-card"></i>
                        </div>
                        <div class="yd-grids-txt ox-grids-box-text">
                            <span>充入</span>
                        </div>
                    </a>
                    <a @click="transfer" class="yd-grids-item ox-grids-box">
                        <div class="yd-grids-icon">
                            <i aria-hidden="true" class="fa fa-exchange"></i>
                        </div>
                        <div class="yd-grids-txt ox-grids-box-text">
                            <span>转账</span>
                        </div>
                    </a>
                    <a @click="withdraw" class="yd-grids-item ox-grids-box">
                        <div class="yd-grids-icon">
                            <i aria-hidden="true" class="fa fa-dropbox"></i>
                        </div>
                        <div class="yd-grids-txt ox-grids-box-text">
                            <span>提取</span>
                        </div>
                    </a>
                    <a @click="tomall" class="yd-grids-item ox-grids-box" v-if="token=='OXT'">
                        <div class="yd-grids-icon">
                            <i aria-hidden="true" class="fa fa-shopping-bag"></i>
                        </div>
                        <div class="yd-grids-txt ox-grids-box-text">
                            <span>商城</span>
                        </div>
                    </a>
                    <a @click="exchange" class="yd-grids-item ox-grids-box" v-if="token!='OXT'">
                        <div class="yd-grids-icon">
                            <i aria-hidden="true" class="fa fa-retweet"></i>
                        </div>
                        <div class="yd-grids-txt ox-grids-box-text">
                            <span>兑换</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <yd-infinitescroll :callback="loadList" ref="infinitescrollBills">
            <yd-cell-group slot="list">
                <yd-cell-item style="padding: 0.24rem;" v-for="bill in tokenBills">
                    <span slot="left">
                        <div class="ox-detail-head">{{bill.note}}</div>
                        <div class="ox-detail-content">用户名：{{bill.trading_name}}</div>
                        <div class="ox-detail-content">手机号：{{bill.mobile}}</div>
                        <div class="ox-detail-content">时&nbsp;&nbsp;&nbsp;&nbsp;间：{{bill.time}}</div>
                    </span>
                        <span slot="right">
                        <div class="ox-detail-head">
                            <span v-if="bill.type===1">-</span>
                            <span v-if="bill.type===2">+</span>
                            <span>{{bill.num}}</span>
                            <span>&nbsp;{{bill.token}}</span>
                        </div>
                        <div class="ox-detail-content">&nbsp;</div>
                        <div class="ox-detail-content">&nbsp;</div>
                        <div class="ox-detail-content">&nbsp;</div>
                    </span>
                </yd-cell-item>
            </yd-cell-group>

            <!-- 数据全部加载完毕显示 -->
            <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

            <!-- 加载中提示，不指定，将显示默认加载中图标 -->
            <img slot="loadingTip" src="static/svg/loading.svg"/>

        </yd-infinitescroll>
    </yd-layout>
</div>
<!-- 引入 Vue -->
<script src="static/lib/vue.min.js"></script>
<script src="static/lib/jquery.min.js"></script>
<script src="static/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<!-- 引入组件库 -->
<script src="static/ydui/ydui.rem.js"></script>
<script src="static/js/common.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            token:''
            ,balance:0.0
            ,lock:0.0
            ,cny:0.0
            ,rate:1.0
            ,ox_ups_and_downs: ''
            ,logo:''
            ,mediaUrl:'https://oxtoken.io/media/'
            ,logoMini: ''
            ,tokenType:0    //0:平台币 1:商城币
            ,tokenBills:[]
            ,page:1
            ,pageSize:10
        },
        methods:{
            getUrlParam:function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]); return null; //返回参数值
            },
            recharge:function () {
                this.$dialog.toast({mes: '该功能暂未开放',timeout: 1500});
            },
            transfer:function () {
                location.href = 'transfer.html?token=' + vm.token + '&balance=' + vm.balance;
            },
            withdraw:function () {
                if(vm.tokenType === 0){
                    this.$dialog.toast({mes: '该功能暂未开放',timeout: 1500});
                }else {
                    location.href = 'withdraw.html?token=' + vm.token + '&balance=' + vm.balance;
                }
            },
            tomall:function () {
                location.href = 'tomall.html?token=' + vm.token + '&balance=' + vm.balance;
            },
            exchange:function () {
                location.href = 'exchange.html?token=' + vm.token + '&balance=' + vm.balance + '&rate=' + vm.rate;
            },
            loadList:function () {
                var _this = this;
                $.get(baseURL + "/api/v1/get-records",{token:_this.token,page:_this.page}, function(r){
                    const _list = r;

                    _this.tokenBills = [..._this.tokenBills, ..._list];

                    if (_list.length < _this.pageSize) {
                        /* 所有数据加载完毕 */
                        _this.$refs.infinitescrollBills.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    _this.$refs.infinitescrollBills.$emit('ydui.infinitescroll.finishLoad');

                    _this.page++;
                });
            }
        },
        created:function () {
            this.token = this.getUrlParam('token');
            //this.balance = this.getUrlParam('balance');
            //this.lock = this.getUrlParam('lock');
            //this.cny = this.getUrlParam('cny');
            if(this.token == 'OXT'){
                this.tokenType = 0;
            }else {
                this.tokenType = 1;
                //this.rate = this.getUrlParam('rate');
                //this.logo = this.getUrlParam('logo');
            }

            var _this = this;
            $.getJSON(baseURL + "/api/v1/get-user-wallet?token=" +this.token, function(r){
                console.log(r);
                if(_this.tokenType == 0){
                    _this.balance = r.ox;
                    _this.lock = r.ox_lock;
                    _this.cny = r.ox_cny;
                    _this.rate = r.ox_price;
                    if(r.ox_ups_and_downs > 0){
                        _this.ox_ups_and_downs = '+' + parseFloat(r.ox_ups_and_downs).toFixed(2).toString();
                    }else {
                        _this.ox_ups_and_downs = parseFloat(r.ox_ups_and_downs).toFixed(2).toString();
                    }
                    _this.logoMini = r.logo_mini;
                }else {
                    _this.balance = r.token[0].balance;
                    _this.lock = r.token[0].lock;
                    _this.cny = r.token[0].cny;
                    _this.rate = r.token[0].ox_rate;
                    if(r.token[0].ups_and_downs > 0){
                        _this.ox_ups_and_downs = '+' + parseFloat(r.token[0].ups_and_downs).toFixed(2).toString();
                    }else {
                        _this.ox_ups_and_downs = parseFloat(r.token[0].ups_and_downs).toFixed(2).toString();
                    }
                    _this.logo = r.token[0].logo
                }
            });

            $.get(baseURL + "/api/v1/get-records",{token:this.token,page:_this.page}, function(r){
                const _list = r;

                _this.tokenBills = [..._this.tokenBills, ..._list];

                if (_list.length < _this.pageSize) {
                    /* 所有数据加载完毕 */
                    _this.$refs.infinitescrollBills.$emit('ydui.infinitescroll.loadedDone');
                    return;
                }

                /* 单次请求数据完毕 */
                _this.$refs.infinitescrollBills.$emit('ydui.infinitescroll.finishLoad');

                _this.page++;
            });
        }
    });
</script>
</body>
</html>